<template>
  <div class="container">
    <Select :options="options" v-model:value="value1" @change="change"></Select>

    <Select className="sss" v-model:value="value2" :style="style">
      <Item :value="0" className="c-item">aaa</Item>
      <Item :value="1">bbb</Item>
      <Item :value="2" className="c-item">ccc</Item>
      <Item :value="3">eee</Item>
      <Item :value="4" className="c-item">fff</Item>
    </Select>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
import Select from "./components/Select/";

const Item = Select.Item

export default {
  name: "App",
  components: {
    Select,
    Item
  },
  setup() {
    const value1 = ref(0)
    const value2 = ref(0)
    const change = (selectValue, selectData) => {
      console.log(selectValue, selectData);
    }

    return {
      change,
      style: {
        marginTop: '60px'
      },
      options: [
        {
          label: '选项一',
          value: 0
        },
        {
          label: '选项二',
          value: 1
        },
        {
          label: '选项三',
          value: 2
        },
        {
          label: '选项四',
          value: 3
        }
      ],
      value1,
      value2
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  padding: 10px;
}

.sss {
  width: 600px!important;
}

.c-item {
  background-color: rebeccapurple;
  color: white;
}
</style>
